<template>
  <div class="index">
    <div class="main-header">
      <div class="navigation">
        <!-- 导航 -->
        <div class="global-nav">
          <div class="nav-header">
            <div class="nav-header-container">
              <div class="brand">
                <router-link to="/">
                  <img
                    src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg"
                    width="110"
                    height="44"
                  />
                </router-link>
                <div
                  @click.stop="ShowHidden = !ShowHidden"
                  class="el-icon-arrow-down"
                >
                  &nbsp;
                </div>
              </div>
            </div>
          </div>
          <div v-if="ShowHidden" class="dropdown-overlay">
            <div class="container">
              <div class="left">
                <h2>平台</h2>
                <ul>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/01_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">自主机器</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/02_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">云与数据中心</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/03_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">深度学习和人工智能</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/04_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">设计和专业视觉化</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/05_index.jpg" alt="" />
                    </a>
                    <div class="text">
                      <a href="">医疗</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/06_index.jpg" alt="" />
                    </a>
                    <div class="text">
                      <a href="">高性能计算</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/07_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">自动驾驶</a>
                    </div>
                  </li>
                  <li class="num1">
                    <a href="">
                      <img src="../assets/img/index/08_index.png" alt="" />
                    </a>
                    <div class="text">
                      <a href="">游戏和娱乐</a>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="divder">&nbsp;</div>
              <div class="right">
                <h2>其他链接</h2>
                <div class="link">
                  <ul>
                    <li>
                      <a href="">开发者</a>
                    </li>
                    <li>
                      <a href="">驱动程序</a>
                    </li>
                    <li>
                      <a href="">支持</a>
                    </li>
                    <li>
                      <a href="">关于NVIDIA</a>
                    </li>
                  </ul>
                  <ul>
                    <li>
                      <a href="">查看所有产品</a>
                    </li>
                    <li>
                      <a href="">GPU 技术大会</a>
                    </li>
                    <li>
                      <a href="">NVIDIA 博客</a>
                    </li>
                    <li>
                      <a href="">人才招聘</a>
                    </li>
                    <li>
                      <a href="">技术</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="sub-bar-nav">
            <div class="container">
              <ul id="nav">
                <li v-if="bar">
                  <el-dropdown
                    v-for="{
                      fid,
                      title,
                      content_1,
                      content_2,
                      content_3,
                    } in bar"
                    :key="fid"
                  >
                    <span class="el-dropdown-link">
                      {{ title
                      }}<i
                        class="iconfont icon-tubiaoarrow-right-filling"
                        v-if="fid !== 5"
                      ></i>
                    </span>
                    <el-dropdown-menu
                      style="width: 180px; border-radius: 0px"
                      slot="dropdown"
                      v-if="fid !== 5"
                    >
                      <el-dropdown-item>{{ content_1 }}</el-dropdown-item>
                      <el-dropdown-item>{{ content_2 }}</el-dropdown-item>
                      <el-dropdown-item>{{ content_3 }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="box">
          <div class="container">
            <div class="greenBar">
              <div class="greenBarTitle">
                <h2>驱动程序下载</h2>
              </div>
            </div>
            <div class="mainContent">
              <div class="breadCrumbs">
                <div class="title">NVIDIA</div>
                <div>&nbsp;>&nbsp;</div>
                <h1>驱动程序下载</h1>
              </div>
              <div class="foot-main">
                <div class="left">
                  <ul>
                    <li>
                      <img src="../assets/img/index/index01.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index02.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index03.jpg" alt="" />
                    </li>
                    <li>
                      <img src="../assets/img/index/index04.jpg" alt="" />
                    </li>
                  </ul>
                </div>
                <div class="right">
                  <div class="form">
                    <div class="pageTitle">NVIDIA 驱动程序下载</div>
                    <div class="table-top">
                      <div class="table1">
                        <div>
                          在下方的下拉列表中进行选择，针对您的 NVIDIA
                          产品确定合适的驱动。
                        </div>
                        <div>帮助&nbsp;&nbsp;</div>
                      </div>
                      <div class="table2">
                        <tbody v-if="selects">
                          <tr
                            v-for="{
                              lid,
                              species,
                              type_1,
                              type_2,
                              type_3,
                              type_4,
                              type_5,
                              type_6,
                              type_7,
                              type_8,
                            } in selects"
                            :key="lid"
                          >
                            <td width="150">{{ species }}:</td>
                            <td width="200">
                              <el-select v-model="value1" :placeholder="type_1">
                                <el-option :value="type_1" class="input"
                                  >{{ type_1 }}
                                </el-option>
                                <el-option :value="type_2" class="input"
                                  >{{ type_2 }}
                                </el-option>
                                <el-option :value="type_3" class="input"
                                  >{{ type_3 }}
                                </el-option>
                                <el-option :value="type_4" class="input"
                                  >{{ type_4 }}
                                </el-option>
                                <el-option :value="type_5" class="input"
                                  >{{ type_5 }}
                                </el-option>
                                <el-option :value="type_6" class="input"
                                  >{{ type_6 }}
                                </el-option>
                                <el-option :value="type_7" class="input"
                                  >{{ type_7 }}
                                </el-option>
                                <el-option :value="type_8" class="input"
                                  >{{ type_8 }}
                                </el-option>
                              </el-select>
                            </td>
                            <td>
                              <span>&nbsp;</span>
                            </td>
                          </tr>
                          <tr>
                            <td>
                              <router-link to="/">
                                <el-button>搜索</el-button>
                              </router-link>
                            </td>
                          </tr>
                        </tbody>
                      </div>
                      <div class="table3">
                        <div class="hrline"></div>
                      </div>
                    </div>
                    <div class="table-bottom">
                      <div class="silverBar">其它的软件及驱动程序</div>
                      <p></p>
                      <div class="table-body">
                        <tr>
                          <td>
                            <p>
                              <strong>NVIDIA 虚拟 GPU 客户</strong>
                            </p>
                            <ul>
                              <li>
                                拥有当前 vGPU 软件许可的企业客户（GRID vPC、GRID
                                vApps 或 Quadro
                                vDWS）可通过点击以下链接，登录企业软件下载门户。如需有关如何访问您已购买许可的详细信息，请访问
                                <a href="">vGPU 软件下载页面</a>
                                <br />
                                <br />
                                <a href="">
                                  <img
                                    src="../assets/img/index/bttn-login.jpg"
                                    alt=""
                                  />
                                </a>
                                <p></p>
                                <p></p>
                              </li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <div class="table-body">
                        <tr>
                          <td>
                            <p>
                              <strong>NVIDIA 虚拟 GPU 客户</strong>
                            </p>
                            <ul>
                              <li>
                                拥有当前 vGPU 软件许可的企业客户（GRID vPC、GRID
                                vApps 或 Quadro
                                vDWS）可通过点击以下链接，登录企业软件下载门户。如需有关如何访问您已购买许可的详细信息，请访问
                                <a href="">vGPU 软件下载页面</a>
                                <br />
                                <br />
                                <a href="">
                                  <img
                                    src="../assets/img/index/bttn-login.jpg"
                                    alt=""
                                  />
                                </a>
                                <p></p>
                                <p></p>
                              </li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <br />
                      <p></p>
                      <div class="hrline"></div>
                      <br />
                      <p></p>
                      <div class="table-foot">
                        <tr v-if="program">
                          <td
                            class="td1"
                            v-for="{
                              pid,
                              pro_title,
                              pro_1,
                              pro_2,
                              pro_3,
                              pro_4,
                              pro_5,
                              pro_6,
                              pro_7,
                              pro_8,
                              pro_9,
                            } in program"
                            :key="pid"
                          >
                            <p>{{ pro_title }}</p>
                            <ul>
                              <li>{{ pro_1 }}</li>
                              <li>{{ pro_2 }}</li>
                              <li>{{ pro_3 }}</li>
                              <li>{{ pro_4 }}</li>
                              <li v-if="pro_5">{{ pro_5 }}</li>
                              <li v-if="pro_6">{{ pro_6 }}</li>
                              <li v-if="pro_7">{{ pro_7 }}</li>
                              <li v-if="pro_8">{{ pro_8 }}</li>
                              <li v-if="pro_9">{{ pro_9 }}</li>
                            </ul>
                          </td>
                        </tr>
                      </div>
                      <p></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--  -->
    <!--  -->
    <!--  -->
    <!-- 脚 -->
    <keep-alive>
      <footer-one></footer-one>
    </keep-alive>
    <!-- src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg" -->
  </div>
</template>

<script>
import FooterOne from "@/components/FooterOne.vue";
export default {
  components: { FooterOne },
  data() {
    return {
      ShowHidden: false,
      bar: null,
      value1: null,
      value2: null,
      value3: null,
      value4: null,
      value5: null,
      value6: null,
      value7: null,
      value8: null,
      selects: null,
      program: null,
    };
  },
  mounted() {
    document.addEventListener("click", this.HiddenClick);
    // 调用bar数据
    this.getbar();
    this.getselect();
    this.getprogram();
  },
  methods: {
    // 获取驱动program数据
    getprogram() {
      this.axios.get("/program").then((res) => {
        // console.log(res);
        this.program = res.data;
      });
    },
    // 获取select数据
    getselect() {
      this.axios.get("/select").then((res) => {
        // console.log(res);
        this.selects = res.data;
      });
    },
    // 获取bar数据
    getbar() {
      this.axios.get("/bar").then((res) => {
        // console.log(res);
        this.bar = res.data;
      });
    },
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false;
    },
  },
};
</script>

<style scoped src='../assets/css/index.css'></style>
<style lang="scss" scoped>
</style>